<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery - ajax无刷新保存例子</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery/jquery.form.js"></script>
<script type="text/javascript" src="Forms.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target 
      || $('[name=' + this.hash.slice(1) +']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body').animate({scrollTop: targetOffset}, 1000);
       return false;
      }
    }
  });

});
</script>
<script type="text/javascript">
     function ajaxPost(){
			 $.ajax({
				 url: "jquery_ajax_post.jsp",
				 type: "POST",
				 data: $.getForms('iForm'),
				 complete: function(res, status){
					 if ( status == "success" || status == "notmodified" ){
						 alert(res.responseText);
					 }
				 }
			 });
     }
</script>

<script language="javascript">
	 $('#iForm').submit(function() {
		 $(this).ajaxSubmit();
		 return false;
	   });
</script>

 <script type="text/javascript">
         $(document).ready(function() {
           $('#iForm').ajaxForm(function() {
                 alert("Thank you for your submit!");
             });
         });
</script>

</head>
<body>
<div class="wrap">
<h2>添加用户</h2>

<form id="iForm" name="iForm" method="post" action="jquery_ajax_post.jsp">
<input id="user_id" name="user_id" type="hidden" value="" />
<table width="400" border="0" align="center" cellpadding="3" cellspacing="1">
  <tr>
    <td width="90">用户名</td>
    <td><input value="" name="username" type="text" id="username" maxlength="16" valid="required" errmsg="用户名不能为空!" /></td>
  </tr>
  <tr>
    <td width="90">密码</td>
    <td><input name="passwd" type="password" id="passwd" maxlength="16"  valid="required" errmsg="密码不能为空!"  /></td>
  </tr>
  <tr>
    <td width="90">重复密码</td>
    <td><input name="passwd2" type="password" id="passwd2" maxlength="16" valid="eqaul" eqaulName="passwd" errmsg="两次密码不同!"  /></td>
  </tr>
  <tr>
    <td width="90">Email</td>
    <td><input value="" name="email" type="text" id="email" maxlength="50" valid="required|isEmail" errmsg="Email不能为空|Email格式不对!" /></td>
  </tr>
   <tr>
    <td width="90">是否锁定</td>
    <td>
	        <input type="radio" name="locked" value="1">是
			<input type="radio" name="locked" value="0">否
	</td>
  </tr>
  <tr>
    <td width="90">爱好</td>
    <td>
	         <input type="checkbox" name="hobby" value="1">游泳
			 <input type="checkbox" name="hobby" value="2">打球
			 <input type="checkbox" name="hobby" value="3">电脑
			 <input type="checkbox" name="hobby" value="4">麻将
	</td>
  </tr>
   <tr>
    <td width="50">居住地</td>
    <td>
	          <select name="province">
			      <option value="北京">北京</option>
				  <option value="上海">上海</option>
				  <option value="广州">广州</option>
				  <option value="深圳">深圳</option>
			  </select>
	</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
	<input type="submit" value="Ajax Submit" />
	<input type="button" name="button" value="保存" class="button" onclick="javascript:ajaxPost();" />
	</td>
  </tr>
</table>
</form>
</div>
</body>
</html>